import { useRouter } from "next/router";
import * as React from "react";
import { IComment } from "../../types";
import styles from "./style.module.scss";
import { Comment, Tooltip, Avatar } from "antd";

interface Props {
  comment: IComment;
}

export default function CommentItem(props: Props) {
  const router = useRouter();
  return (
    <Comment
      className={styles.in}
      author={<a>{props.comment.user[0].nickname}</a>}
      avatar={
        <div
          onClick={() => router.push("/user/" + props.comment.userId)}
          style={{
            backgroundImage: `url(/api/article/download/${props.comment.user[0].avatar})`,
            height: "30px",
            width: "30px",
            borderRadius: "30px",
            backgroundSize: "cover",
          }}
        ></div>
      }
      content={<p>{props.comment.content}</p>}
      datetime={
        <Tooltip
          title={
            "发表于：" +
            new Date(props.comment.time).toLocaleDateString() +
            " " +
            new Date(props.comment.time).toLocaleTimeString()
          }
        >
          <span>
            {new Date(props.comment.time).toLocaleDateString() +
              " " +
              new Date(props.comment.time).toLocaleTimeString()}
          </span>
        </Tooltip>
      }
    />
  );
}
